<template>
	<view>
		<view class="bm-view">
			<baidu-map :center="center" :zoom="zoom" @ready="handler" @dragend="dragendHandler" class="bm-view">
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
  			</baidu-map>
			<image class="cover-image" src="@/static/images/location.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				center: {lng: 0, lat: 0},
                zoom: 3,
			}
		},
		onLoad() {
		},
		methods: {
			handler ({BMap, map}) {
				this.center.lng = 116.404
				this.center.lat = 39.915
				this.zoom = 15
			},
			dragendHandler(e){
				console.log('%c [ e.target.getCenter() ]-242', 'font-size:13px; background:#400f4b; color:#84538f;', e.target.getCenter())
			},
		}
	}
</script>

<style lang="scss">
	.bm-view {
		width: 100%;
		height: 300px;
	}
	.cover-image {
		height: 68rpx;
		width: 68rpx;
		position: fixed;
		/* #ifdef APP-PLUS */
		position: absolute;
		/* #endif */
		top: 20%;
		left: 50%;
		margin-top: -30rpx;
		margin-left: -30rpx;
	}
</style>
